<template>
	<view class="page">
		<view class="address">
			<image class="add-add" src="http://yao.hayzon.com/static/summitOrder/add.png"></image>
			<text class="add-title">新增收货地址</text>
			<image class="add-arrow" src="http://yao.hayzon.com/static/summitOrder/arrow-black.png"></image>
		</view>
		<view class="line">
		</view>
		<view class="shop">
			<image class="shop-ico" src="http://yao.hayzon.com/static/summitOrder/shop.png"></image>
			<text class="add-title">康品优选</text>
		</view>
		<view class="good-item" v-for="(item,index) in goods" :key="index">
			<image :src="item.image"></image>
			<view>
				<view class="good-item-title">
					<text>{{item.title}}</text>
					<text>{{item.subtitle}}</text>
				</view>
				<view class="good-item-price">
					<text>￥{{item.price}}</text>
					<text>x{{item.count}}</text>
				</view>
			</view>
		</view>
		<view class="itemSub">
			<view class="item first">
				<text class="title">优惠卷</text>
				<image src="http://yao.hayzon.com/static/summitOrder/arrow-black.png"></image>
				<text class="val">使用优惠</text>
			</view>
			<view class="item"><text class="title">配送方式</text><text class="val">快递</text></view>
			<view class="item first"><text class="title">买家留言</text><text class="val">建议留言前先与商家沟通确认</text></view>
			<view class="item"><text class="title">商品金额</text><text class="val">￥38.00</text></view>
			<view class="item"><text class="title"></text>
				<text class="val var-sum">￥38.00</text>
				<text class="val var-title">合计：</text></view>
		</view>
		<view class="foot">
			<text>本订单由</text>
			<image src="http://yao.hayzon.com/static/summitOrder/z-1.png"></image>×<image src="http://yao.hayzon.com/static/summitOrder/Z-2.png"></image><text>全程保障</text>
		</view>
		<view class="itemSub button">
			<view class="item last">
				<text class="title"></text>
				<view class="val var-btn" @click="togglePopup('bottom-share')">提交支付</view>
				<text class="val var-sum">￥38.00</text>
				<text class="val var-title">合计：</text>

			</view>
		</view>
		<uni-popup :show="type === 'bottom-share'" position="bottom" @hidePopup="togglePopup('')">
			<view class="bottom-content">
				<view v-for="(item, index) in bottomData" :key="index">
					<view class="bottom-content-image">
						<view class="icon">
							<image :src="item.icon"></image>
						</view>
						<view class="bottom-content-text">{{ item.text }}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'

	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				type: '',
				list: ['1', '2'],
				bottomData: [{
					text: '支付宝支付',
					icon: 'http://yao.hayzon.com/static/summitOrder/zfb.png',
					loading: false
				}, {
					text: '微信支付',
					icon: 'http://yao.hayzon.com/static/summitOrder/weixin.png',
					loading: false
				},
				 {
					text: '银行卡支付',
					icon: 'http://yao.hayzon.com/static/summitOrder/card.png',
					loading: false
				}],
				goods: [{
					image: "http://yao.hayzon.com/static/goodlist/1.png",
					title: "枇杷秋梨膏 | 古法工艺。浓缩秋梨汁甘草枇杷菊花。一大罐450克",
					subtitle: "枇杷秋梨膏450克",
					price: "38.00",
					count: "1"
				}]
			};
		},
		onBackPress() {
			if (this.type !== '') {
				this.type = '';
				return true;
			}
		},
		methods: {
			togglePopup(type) {
				this.type = type;
			}
		}
	};
</script>


<style>
	.icon {
		margin-top: 10upx;
		float: left;
	}
	
	.icon image {
		width: 70upx;
		height: 70upx;
	}
	
	.bottom-content-text {
		text-align: center;
		width: 200upx;
		line-height: 95upx;
		font-size: 1.15em;
		margin-left: 15%;
	}
	
	.bottom-content-image {
		display: flex;
		height: 95upx;
		width: 50%;
		padding-left: 25%;
		padding-right: 25%;
		border-bottom: 1px solid #e6e6e6;
	}
	.bottom-content {
		/*background-image: url('http://yao.hayzon.com/static/summitOrder/bj.png');
		background-size: 100%;
		background-repeat: no -repeat;*/
		flex-wrap: wrap;
		width: 100%;
		display: block;
	}
	.page {
		background-repeat: no-repeat;
		background-size: 100%;
		/* background-image: url('http://yao.hayzon.com/static/summitOrder/goodorder.png'); */
		height: 100%;
		background-color: #f8f8f8;
		padding-top: 3upx;

	}

	.foot {
		height: 50upx;
		color: #bbbbbb;
		text-align: center;
		position: fixed;
		bottom: 110upx;
		width: 100%;
		font-size: 0.8em;
	}

	.foot image {
		height: 30upx;
		width: 120upx;
		vertical-align: middle;
	}

	.shop {
		height: 100upx;
		line-height: 100upx;
		margin-top: 20upx;
		padding-left: 38upx;
		display: flex;
		align-items: center;
		background-color: #fff;
	}

	.shop-ico {
		width: 40upx;
		height: 40upx;
	}

	.address {
		height: 125upx;
		display: flex;
		align-items: center;
		padding-left: 38upx;
		line-height: 110upx;
		background-color: #fff;
	}

	.line {
		height: 5upx;
		width: 100%;
		background-image: url('http://yao.hayzon.com/static/summitOrder/line.png');
		background-size: 100%;
	}

	.line image {
		height: 2upx;
	}

	.add-add {
		width: 60upx;
		height: 60upx;
	}

	.add-title {
		margin-left: 30upx;
		font-size: 1.1em;
		color: #383839;
	}

	.add-arrow {
		width: 40upx;
		height: 40upx;
		position: absolute;
		right: 30upx;
	}

	.itemSub {
		width: 100%;
		/* background-color: #fff; */
	}

	.item {
		border-bottom: 1px solid #eeeeee;
		height: 99upx;
		line-height: 99upx;
		padding-left: 30upx;
		padding-right: 60upx;
		background-color: #fff;
		align-items: center;
	}

	.first {
		margin-bottom: 30upx;
		border: none;
	}

	.last {
		border: none;
		padding: 0upx;
		margin: 0upx;
	}

	.title {
		font-size: 1.2em;
		color: #333333;
	}

	.val {
		color: #666666;
		float: right;
		margin-right: 15upx;
	}

	.var-title {
		font-size: 1.2em;
	}

	.var-sum {
		color: #eb544d;
		font-weight: bold;
	}

	.var-btn {
		height: 100%;
		background-color: #eb544d;
		padding: 0upx;
		margin: 0upx;
		width: 200upx;
		color: #FFFFFF;
		line-height: 100upx;
		text-align: center;
		font-size: 1.1em;
	}

	.item image {
		width: 40upx;
		height: 40upx;
		position: absolute;
		right: 30upx;
		margin-top: 30upx;
	}

	.button {
		width: 100%;
		position: fixed;
		bottom: 0px;
		background-color: #fff;
	}

	.button-but {
		background-color: #df634d;
		width: 100upx;
	}

	.good-item {
		padding-top: 10upx;
		padding-left: 38upx;
		padding-bottom: 20upx;
		display: flex;
		flex-direction: row;
		/* background-color: #ffffff; */
	}

	.good-item image {
		width: 180upx;
		height: 180upx;
		flex-shrink: 0;
		margin-top: 10upx;
	}

	.good-item-title {
		font-size: 1.1em;
		padding-left: 15upx;
		padding-right: 10upx;
		color: #333333;
	}

	.good-item-title text {
		display: block;
	}

	.good-item-title text:last-child {
		font-size: 0.8em;
		color: #999999;
	}

	.good-item-price {
		padding-left: 10upx;
	}

	.good-item-price text:first-child {
		color: #eb544d;
		font-size: 1.1em;
		font-weight: bold;
	}

	.good-item-price text:last-child {
		position: absolute;
		right: 30upx;
	}
</style>
